<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Military Time Duration Calculator</title>
</head>
<body>

    <h1>Military Time Duration Calculator</h1>

    <form id="timeForm">
        <label for="timeIn">Time In (Standard Time):</label>
        <input type="time" id="timeIn" name="timeIn" required><br><br>
        
        <label for="timeOut">Time Out (Standard Time):</label>
        <input type="time" id="timeOut" name="timeOut" required><br><br>

        <button type="submit">Calculate Duration</button>
    </form>

    <p id="durationResult"></p>

    <script>
        function convertToMilitaryTime(timeString) {
            const [time, modifier] = timeString.split(' ');
            let [hours, minutes] = time.split(':');
            if (hours === '12') {
                hours = '00';
            }
            if (modifier === 'PM') {
                hours = parseInt(hours, 10) + 12;
            }
            return `${hours}:${minutes}`;
        }

        const form = document.getElementById('timeForm');
        const durationResult = document.getElementById('durationResult');

        form.addEventListener('submit', function(event) {
            event.preventDefault();

            const timeIn = convertToMilitaryTime(form.timeIn.value);
            const timeOut = convertToMilitaryTime(form.timeOut.value);

            const timeInParts = timeIn.split(':');
            const timeOutParts = timeOut.split(':');

            const hoursIn = parseInt(timeInParts[0]);
            const minutesIn = parseInt(timeInParts[1]);
            const hoursOut = parseInt(timeOutParts[0]);
            const minutesOut = parseInt(timeOutParts[1]);

            const totalMinutesIn = hoursIn * 60 + minutesIn;
            const totalMinutesOut = hoursOut * 60 + minutesOut;

            let durationMinutes = totalMinutesOut - totalMinutesIn;
            if (durationMinutes < 0) {
                // Adjust for overnight duration
                durationMinutes += 24 * 60;
            }

            const hours = Math.floor(durationMinutes / 60);
            const minutes = durationMinutes % 60;

            durationResult.textContent = `Duration: ${hours} hours ${minutes} minutes`;
        });
    </script>

</body>
</html>
